<template>
  <div class="myTest">
    <div class="logo"><img src="../../assets/test_logo.png" alt=""> 我的</div>
  	<el-row type="flex" class="row-bg" justify="space-around">
  		<el-col :sm="20" :md="18" :lg="18"  :xs="22">
  			<div class="grid-content bg-purple-light myTest-list">
		  		<div class="myTest-title"><img src="../../assets/test_icon.png"/>我的试卷</div>
		  		<div class="myTest-content">
		  			<el-table
				      :data="tableData"
				      style="width: 100%" :show-header="false">
				      <el-table-column
				        prop="testName"
				        label="试卷"
				        style="width: 100%" align="left">
				        <template slot-scope="scope">
					        <span @click="handleEdit(scope.row)">{{ scope.row.testPaperName}}</span>
					        <i v-if='scope.row.academicRecordsId==null' class="testStatus">（缺考）</i>
					        <i v-if='scope.row.academicRecordsId!=null' class="testStatus">（已完成本场考试）</i>
					      </template>
				      </el-table-column>
				      <el-table-column
				        label="进入"
				        style="width: 100%" align="right">
				        <template slot-scope="scope">
					        <el-button
					          type="text"
					          @click="handleEdit(scope.row)">查看解答</el-button>
					      </template>
				      </el-table-column>
				    </el-table>
		  		</div>
  			</div>
  		</el-col>
  	</el-row>
  </div>
</template>

<script>
export default {
  name: 'myTest',
  components:{
  	
  },
  data () {
    return {
      tableData:[],
      myId:''
    }
  },
  created:function(){
  	this.myId=localStorage.getItem("id");
  	var that=this;
  	this.axios({
  		method:'post',
  		url:that.$store.state.globalTestApi+"/admin/ExaminationRoom/examineeERoomList2",
  		data:{
  			id:that.myId
  		}
  	}).then(function(res){
			if(res.data.msg=="操作成功"){
			that.tableData=res.data.data.list
		}else{
			that.$message('未获取到试卷列表');
			}
  	})
  },
  methods:{
  	handleEdit(data1){
  		if(data1.academicRecordsId!=null){
				this.$confirm('查看试卷详情？')
		    .then(_ => {
		        this.$router.push({
		        	name:"testResult",
		        	query:{
		        		academicRecordsId:data1.academicRecordsId
		        	}
		        })
		      })
		    .catch(_ => {});
		  }else{
		   	this.$confirm('查看试卷详情？')
		    .then(_ => {
		        this.$router.push({
		        	name:"testResult",
		        	query:{
		        		testPaperId:data1.testPaperId
	        	}
	        	})
		    })
		    .catch(_ => {});
	   	}
  	}
  }
}
</script>


<style>
.myTest .logo{padding-top: 80px;font-size: 32.59px;color: #fff;margin-bottom: 30px}
.myTest .logo img{vertical-align: middle;width: 69px;height: 60px;}
.myTest .myTest-list{padding:80px 10% 50px 10%;background-color: #fff;box-shadow: 0px 0px 3px rgba(0,0,0,0.3);box-sizing: border-box;margin-bottom: 116px;}
.myTest .myTest-title{font-size: 20px;color:#000;letter-spacing: 3px;text-align: left;margin-bottom:10px ;}
.myTest .myTest-title img{width: 52px;height: 60px;margin-right: 5px;vertical-align: text-bottom;}
.myTest .myTest-content div span{font-size: 18px;color: #898989;cursor: pointer;}
.myTest .myTest-content .el-table__row:hover span{color: #1997bc;}
.myTest .myTest-content div i{font-style: normal;}
.myTest .myTest-content td{padding: 6px 0;}
.myTest .myTest-content .testStatus{font-size: 14px;color: #666;}
@media screen and (max-width: 768px) {
	.myTest .logo{font-size: 20px;padding-top:50px;}
	.myTest .logo img{width: 39px;height: 33px;}
	.myTest .myTest-title{font-size: 15px;}
	.myTest .myTest-title img{width: 22px;height: 30px;}
	.myTest .myTest-list{padding: 50px 10% 30px 10%;}
	.myTest .myTest-content div span{font-size: 14px;}
	.myTest .myTest-content div i{font-size: 12px;display: block;}
	.myTest .myTest-content td{padding: 3px 0;}
}
</style>
